<template>
  <!--    查询房间-->
  <div class="select-input">
    <el-input v-model="search" style="width: 240px" placeholder=""></el-input>
    <el-button type="primary">查询</el-button>
    <!--    新增房间-->
    <el-button @click="dialogFormVisible = true" type="success"> 新增 </el-button>
    <el-dialog v-model="dialogFormVisible" title="新增房间" width="500">
      <el-form :model="form">
        <el-form-item label="房间图片:" :label-width="formLabelWidth">
          <el-upload
            v-model="form.picture"
            class="avatar-uploader"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="房间类型:" :label-width="formLabelWidth">
          <el-select v-model="form.roomType" placeholder="请选择房间类型">
            <el-option label="公寓" value="公寓" />
            <el-option label="别墅" value="别墅" />
            <el-option label="平层" value="平层" />
            <el-option label="海景房" value="海景房" />
            <el-option label="lofter" value="lofter" />
          </el-select>
        </el-form-item>
        <el-form-item label="地址:" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off" />
        </el-form-item>
        <el-form-item label="介绍:" :label-width="formLabelWidth">
          <el-input v-model="form.desp" autocomplete="off" />
        </el-form-item>
        <el-form-item label="默认日常价格:" :label-width="formLabelWidth">
          <el-input v-model="form.defaultPrice" autocomplete="off" />
        </el-form-item>
        <el-form-item label="默认节日价格:" :label-width="formLabelWidth">
          <el-input v-model="form.holidayPrice" autocomplete="off" />
        </el-form-item>
        <el-form-item label="备注:" :label-width="formLabelWidth">
          <el-input v-model="form.content" autocomplete="off" />
        </el-form-item>
        <el-form-item label="城市:" :label-width="formLabelWidth">
          <el-input v-model="form.code" autocomplete="off" />
        </el-form-item>
        <el-form-item label="经度:" :label-width="formLabelWidth">
          <el-input v-model="form.lng" autocomplete="off" />
        </el-form-item>
        <el-form-item label="纬度:" :label-width="formLabelWidth">
          <el-input v-model="form.lat" autocomplete="off" />
        </el-form-item>
        <el-form-item label="状态:" :label-width="formLabelWidth">
          <el-select v-model="form.status" placeholder="请选择商户状态">
            <el-option label="空房" value="空房" />
            <el-option label="已出租" value="已出租" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  <!--    房间列表-->
  <el-table
    :data="tableData"
    :header-cell-style="{
      textAlign: 'center',
      backgroundColor: '#93b5cf',
      color: 'white'
    }"
    :cell-style="{ textAlign: 'center' }"
    border
    style="padding: 30px"
  >
    <el-table-column prop="picture" label="房间图片" width="160">
      <template #default="scope">
        <img :src="scope.row.picture" min-width="140" height="140" />
      </template>
    </el-table-column>
    <el-table-column prop="roomType" label="房间类型" width="100" />
    <el-table-column prop="address" label="地址" width="100" />
    <el-table-column prop="desp" label="介绍" width="100" />
    <el-table-column prop="defaultPrice" label="日常价格" width="100" />
    <el-table-column prop="holidayPrice" label="节假日价格" width="100" />
    <el-table-column prop="content" label="备注" width="100" />
    <el-table-column prop="status" label="状态" width="100" />
    <el-table-column prop="code" label="城市" width="100" />
    <el-table-column prop="lng" label="经度" width="100" />
    <el-table-column prop="lat" label="纬度" width="100" />
    <el-table-column fixed="right" label="操作" width="100">
      <template #default>
        <el-button link type="primary" size="small" @click="handleClick">删除 </el-button>
        <el-button link type="primary" size="small">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--    分页-->
  <el-pagination
    class="page"
    v-model:current-page="currentPage3"
    v-model:page-size="pageSize3"
    :disabled="disabled"
    layout="prev, pager, next, jumper"
    :total="1000"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>
<script setup lang="ts">
/*房间列表*/
import { reactive, ref } from 'vue'
import type { UploadProps } from 'element-plus'
import { ElMessage } from 'element-plus'
import { uploadContext } from '../../../http'

const imageUrl = ref('')
const uploadUrl = ref(uploadContext)

const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  if (response.code == 0) {
    ElMessage.success('上传成功')
    form.picture = response.data
  }
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/png') {
    ElMessage.error('只能上传图片!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('文件不能超过2MB!')
    return false
  }
  return true
}

const tableData = ref([
  {
    picture: '',
    roomType: '公寓',
    address: '辽宁省大连市甘井子区华录园',
    desp: '整套88㎡，3间卧室1厅1厨1卫，可住6人3张床（2x1.8㎡x1.8㎡）',
    defaultPrice: '¥150.0',
    holidayPrice: '¥260.0',
    content: '设备：有电梯 洗衣机 冰箱，交通：交通便利 离地铁口200m',
    status: '已租出',
    code: '2102',
    lng: '12.9999',
    lat: '39.1235',
    equip: ''
  }
])
/*新增房间*/
const dialogFormVisible = ref(false)
const formLabelWidth = '120px'
const form = reactive({
  picture: '',
  roomType: '',
  address: '',
  desp: '',
  defaultPrice: '',
  holidayPrice: '',
  content: '',
  status: '',
  code: '',
  lng: '',
  lat: ''
})
</script>

<style scoped>
/*上传房间照片*/
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.select-input {
  padding-right: 30px;
  float: right;
}

.el-breadcrumb {
  padding-left: 15px;
  padding-top: 15px;
}

.table {
  padding: 30px;
}

.page {
  display: flex;
  justify-content: center;
}
</style>
<style>
/*上传身份证照片*/
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
</style>
